<template>
    <div>
        <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item v-for="item in suibilist" :key="item._id">
                <template #title>
                    <div class="listtitbox">{{ item.tit }}</div>
                </template>
                <div class="listtitbox">
                    <p>{{ item.suibitext }}</p>
                    <div class="uptimeandbtn">
                        <span>上传时间：{{item.uptime}}</span>
                        <el-button size="small" @click="deletesuibi(item._id)">删除</el-button>
                    </div>
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>
<script setup>
import { gotodeletesuibi, tianjiasuibi, GetSuibiList } from '@/api/suibi.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router'
const router = useRouter();
// const activeNames = ref(['1'])
const suibilist = ref([])
const handleChange = (val) => {
    console.log(val)
}
// 删除随笔日记
const deletesuibi = async (_id) => {
    let data = await gotodeletesuibi(_id)
    const { resultCode, resultInfo } = data
    if (resultCode == 1) {
        ElMessage('删除成功')
        isgetsuibilist()
    } else {
        ElMessage({
            message: '删除失败请检查网络或稍后再试',
            type: 'success',
        })
    }
}
// 获取随笔日记列表
const isgetsuibilist = async () => {
    let data = await GetSuibiList(JSON.parse(localStorage.getItem("user"))._id)
    const { resultCode, resultInfo } = data
    if (resultCode == 1) {
        resultInfo.forEach((item, index, arr) => {
            arr[index].tit = " " + item.suibitext.substring(0, 15) + "……"
        })
        suibilist.value = resultInfo
    } else {
        suibilist.value = [{
            suibitext: '快来发表些什么吧！',
            _id: false
        }]
    }
}
onMounted(() => {
    isgetsuibilist()
});
</script>
<style lang="scss" scoped>
    .listtitbox{
        margin:0 20px;
        .uptimeandbtn{
            text-align: right;
            button{
                margin-left: 20px;
            }
        }
    }
</style>